<template>
	<view style="min-height: 100vh;">
		<view><u-toast ref="uToast" /></view>
		<view class="tips">
			<view style="color: white; font-size: 32rpx;">应用常规使用管控策略部署</view>
			<view style="color: #cccccc; font-size: 25rpx;">可通过该功能板块对已安装应用的连网权限、桌面图标显示、APP更新权限以及APP应用锁定等，进行管控部署</view>
		</view>
		
		
		<view class="body">
			<view class="showText">
				<text style="font-size: 30rpx; padding-top: 20rpx; padding-bottom: 20rpx;">{{settingText}}</text>
				<text style="color: #cccccc; float: right;">已安装{{count}}个</text>
			</view>
			<view style="display: flex; justify-content: center;"  v-if="showNothing">
				<view>
					<u-image width="120rpx" src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/noData.png" mode="widthFix"></u-image>
					<view>暂无数据</view>
				</view>
			</view>
			<view class="work_top box_radius" v-for="(item, index) in appList" :key="index">
				<view class="box box-pack-between box-align-center" @click="showAppInfo(item)">
					<view class="left" style="width: 85%;" >
						<image :src="item.app_img" class="work_top clockImg"></image>
						<view style="padding-top: 33rpx; font-weight: bolder;">{{item.app_name}}</view>
						<view style="color: #bfbfbf;">{{item.app_size|zhDate}}</view>
					</view>
					<view class="right" style="width: 205rpx;">
						<text style="color: #cccccc;">应用管控设置</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getAppInstall
	} from '@/api/userHome.js'
	export default {
		data() {
			return {
				list:[],
				count:0,
				settingText: '已安装应用列表',
				src: '',
				appList: [],
				pages: 1,
				//是否无更多
				notMore: true,
				showNothing: false,
				totalPages: 0,
				pageSize: 10,
				customStyle: {
					margin: '0rpx',
					padding: '0rpx',
					width: '100rpx',
					height: '60rpx',
				},
			}
		},
		
		onShow() {
			this.refreshListAndPage();
		},
		
		//页面滚动到底部事件
		onReachBottom() {
			 if (this.notMore) {
				 this.pages++
				 this.getInstall()
			 }
		},
		
		methods: {
			getInstall() {
				uni.showLoading({
					title: "加载中"
				});
				getAppInstall({
					id: uni.getStorageSync("snId"),
					userId: uni.getStorageSync("userId"),
					pageSize: this.pageSize
				}).then(res => {
					this.count = res.total
					if (res.data) {
						this.appList = this.appList.concat(res.data)
						this.showNothing = false
						this.totalPages =  Math.ceil(res.total / this.pageSize)  //获取总页数
						if (this.pages >= this.totalPages) {
							this.notMore = false
						}
					}else {
						this.notMore = false
						if (this.pages == 1) {
							this.showNothing = true
						}else {
							uni.showToast({
								title: '没有更多了'
							})
						}
					}
				}).catch(err => {
					uni.hideLoading()
					this.showNothing = true
					this.appList = []
				})
				uni.hideLoading()
			},
			
			//刷新列表和页码
			refreshListAndPage() {
				this.appList = []
				this.pages = 1
				this.notMore = true
				this.hasData = false
				this.getInstall()
			},
			
			showAppInfo(item) {
				
				uni.navigateTo({
					url: '/pages_subpackage/appControl/setAppControl/index?item=' +encodeURIComponent(JSON.stringify(item)) 
				})
			}
			
		}
	}
	
</script>

<style lang="scss">
	.tips {
		    background-color: #4d94ff;
		    border-radius: 35rpx;
		    height: 140rpx;
		    padding-left: 60rpx;
		    padding-top: 13rpx;
	}
	.showApp {
		background-color: #fff;
		border-radius: 30rpx;
		.search {
			display: flex;
			margin: 20rpx;
		}
	}
	.work_top {
		background-color: #FFFFFF;
		padding: 30rpx;
		.footer_time {
			margin-top: 20rpx;
			font-size: 20rpx;
			letter-spacing: 2rpx;
		}
		.clockImg {
			height: 150rpx;
			width: 150rpx;
			float: left;
			padding: 0rpx;
			padding-right: 10rpx;
		}
		.pushText {
			    border-style: solid;
			    border-width: 1rpx;
			    border-radius: 27rpx;
			    width: 200rpx;
			    height: 74rpx;
			    padding: 17rpx;
			
		}
		
	}
	.showText {
		height: 80rpx;
		padding: 25rpx;
	}
	
	.app {
		.tips {
			    background-color: #4d94ff;
			    border-radius: 35rpx;
			    height: 180rpx;
			    padding-left: 60rpx;
			    padding-top: 13rpx;
				margin-bottom: 20rpx;
		}
		
		.body {
			background-color: #ffffff;
			border-style: solid;
			border-color: #ffffff;
			border-radius: 20rpx;
		}
		.noData {
			display: flex;
			justify-content: center;
		}
		.appInfo {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
		}
	}
	
	
</style>